Navbar

功能說明

1. 標題
2. 分頁連結(可隨視窗大小調整)
3. 社群媒體(可隨視窗大小調整)

CSS重點

• 一般情況下，導覽列(Navbar)有自己的許多Class，例如 :

/*Navbar*/
...
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}
.nav-toggle {
  font-size: 1.5rem;
  color: var(--clr-primary-5);
  background: transparent;
  border-color: transparent;
  transition: var(--transition);
  cursor: pointer;
}
...

• 但透過@media screen可以去判斷，當視窗寬度大於800px時，同名的Class擁有不同的屬性，例如 :

...
@media screen and (min-width: 800px) {
    .nav-header {
        padding: 0;
    }
    .nav-toggle {
        display: none;
    }
...}

HTML重點

1. 標題與選單按鈕 :

   <div class="nav-header">
       <!-- 匯入標題圖片 -->
       <img src="./logo.svg" class="logo" alt="logo"/>
   
       <!-- 當視窗寬度小於800px時，顯示選單按鈕 -->
       <button class="nav-toggle">
           <!-- 引用Font Awesome的icon -->
           <i class="fas fa-bars"></i>
       </button>
   </div>
   

若想了解Font Awesome的用法介紹，可以查閱上一篇文章的內容!

2. 選單連結 :

   <ul class="links">
       <li>
           <a href="index.html">home</a>
       </li>
       <li>
           <a href="about.html">about</a>
       </li>
       <li>
           <a href="projects.html">projects</a>
       </li>
       <li>
           <a href="contact.html">contact</a>
       </li>
   </ul>
   

視窗大小呈現畫面不同，使用class="link"去做控制

3. 社群媒體 :

   <ul class="social-icons">
       <li>
           <a href="https://www.facebook.com">
               <i class="fab fa-facebook"></i>
           </a>
       </li>
       <li>
           <a href="https://www.twitter.com">
               <i class="fab fa-twitter"></i>
           </a>
       </li>
       <li>
           <a href="https://www.behance.com">
               <i class="fab fa-behance"></i>
           </a>
       </li>
       <li>
           <a href="https://www.linkedin.com">
               <i class="fab fa-linkedin"></i>
           </a>
       </li>
       <li>
           <a href="https://www.sketch.com">
               <i class="fab fa-sketch"></i>
           </a>
       </li>
       </ul>
   

視窗寬度大於800px時才會顯示，使用class = "social-icons"去控制

JavaScript重點

1. 利用class="nav-toggle"去抓取選單按鈕

   const navToggle = document.querySelector(".nav-toggle"); 
   

2. 利用class="links"去抓取選單連結

   const links = document.querySelector(".links");
   

3. 將選單按鈕新增點擊事件

   navToggle.addEventListener("click", function () {
     links.classList.toggle("show-links");
   });
   

   • 使用ClassList可以使用裡面的方法新增、刪除、修改節點上的CSS類，或判斷某個節點是否被賦予了某個CSS類。例如 :
     • add : 新增CSS
     • remove : 移除CSS
     • toggle : 當元素上沒有此CSS類時，它就新增這個CSS類；如果元素已經有了這個CSS類，它就是刪除該CSS類。總之，就是反轉操作，此方法適合拿來做下拉式選單。
     • contains : 判斷某CSS類是否存在於元素中
     • length : 回傳ClassList有幾個CSS類

參考與引用來源

1. @media screen介紹
2. ClassList與其屬性介紹